<template>
  <div class="w-full h-full">
    <Filter @operate-add="handleCreate" @input-change="handleInputChange" />
    <div class="table-wrap">
      <!-- <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :height="`calc(100vh - 220px)`"
        header-row-class-name="table-header-row"
        table-layout="fixed"
      >
        <el-table-column
          v-for="item in tableCols"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template #default="{ row, column }">
            {{ formatColumnLabel(row, column) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template #default="{ row }">
            <TableOperations
              :row="row"
              :visible-size="4"
              :operations="tableOperate"
              :class-name="'extra-operation'"
              @click="handleOperateClick"
            ></TableOperations>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="justify-end pt-3"
        :current-page="state.page"
        :page-size="state.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="sizes, prev, pager, next"
        :total="state.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination> -->
      <Table
        :tableCols="tableCols"
        :tableOperate="tableOperate"
        :tableData="tableData"
        @sizeChange="handleSizeChange"
        @currentChange="handleCurrentChange"
        @operateClick="handleOperateClick"
      />
    </div>
  </div>
  <FlowControlDialog
    :operate-type="operateType"
    v-if="showDialog"
    v-model="showDialog"
    :detail-data="currentDeatil"
    @update:list="getList"
  ></FlowControlDialog>
</template>
<script setup lang="ts">
import Filter from "./filter.vue";
import FlowControlDialog from "./flowControlDialog.vue";

import { tableCols, tableOperate, flowControlConversion } from "./const.ts";
import { ref, reactive, onMounted } from "vue";

// import { getGrayAndSandList } from "@/api/serviceManagement/index.ts";
// import {
//   editFlowControItem,
//   deleteFlowControItem
// } from "@/api/flowControl/index.ts";
import { formatTimestamp } from "@/utills/common.ts";
import Table from "@/components/table/Table/Table.vue";

const tableData: any = ref([]);

// 表格操作
const operateType = ref("");
const currentDeatil = reactive<flowControlConversion>({
  id: "",
  name: "",
  description: "",
  routeId: "",
  type: "",
  flowControlConfig: ""
});

const handleOperateClick = async (row: flowControlConversion, type: string) => {
  operateType.value = type;
  switch (type) {
    case "edit":
      currentDeatil.id = row.id;
      currentDeatil.name = row.name;
      currentDeatil.description = row.description;
      currentDeatil.routeId = row.routeId;
      currentDeatil.type = row.type;
      currentDeatil.flowControlConfig = row.flowControlConfig;
      showDialog.value = true;
      break;
    case "delete":
      currentDeatil.id = row.id;
      await deleteFlowControItem({ id: currentDeatil.id });
      getList();
      break;
    default:
      break;
  }
};
const formatColumnLabel = (row: flowControlConversion, column: any) => {
  let property: keyof flowControlConversion;
  property = column.property;
  switch (property) {
    case "updateTime":
      return `${row.updateTime}`;
    default:
      return row[property] ? row[property] : '-';
  }
};

// filter过滤条件-新增
const handleCreate = () => {
  operateType.value = "create";
  currentDeatil.name = "";
  currentDeatil.id = "";
  currentDeatil.description = "";
  currentDeatil.routeId = "";
  currentDeatil.type = "";
  currentDeatil.flowControlConfig = "";
  showDialog.value = true;
};
// filter过滤条件-输入框
const handleInputChange = (val: string, type: string) => {
  if (type === "configName") {
    state.name = val;
    state.routeName = "";
  } else {
    state.routeName = val;
    state.name = "";
  }
  getList();
};

// 弹窗
const showDialog = ref(false);

// 分页
const state = reactive({
  total: 0,
  page: 1,
  pageSize: 10,
  name: "",
  classType: "流量控制",
  routeName: ""
});

const handleSizeChange = (val: number) => {
  state.pageSize = val;
  getList();
};

const handleCurrentChange = (val: number) => {
  state.page = val;
  getList();
};

// 获取列表
const getList = async () => {
  const params: any = {
    page: state.page,
    pageSize: state.pageSize,
    pagination: 10,
    classType: state.classType
  };
  if (state.name !== "") {
    params.name = state.name;
  }
  if (state.routeName !== "") {
    params.routeName = state.routeName;
  }
  if (params.desc == "") delete params.desc;
  const { dataList } = await getGrayAndSandList(params);
  dataList.map(el => {
    if (el.updateTime) {
      el.updateTime = formatTimestamp(el.updateTime);
      return el;
    }
  });
  tableData.value = dataList;
  state.total = dataList.length;
};

// const timestampToDate = (timestamp: any) => {
//   var date = new Date(Number(timestamp) * 1000);
//   return date.toLocaleString(); // 返回本地化的日期和时间字符串
// }; // 把时间戳转成时间

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.table-wrap {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 1px 3px 0px #e9eaee;
  width: 100%;
  padding: 16px;
  .el-table {
    ::v-deep .cell {
      // display: contents;
    }
  }
}
</style>
